import styles from './ballsAddedInCart.module.scss';
import Button from '../button/button';
import { useAppDispatch } from '../../store/hooks';
import { decrementCount, deleteBallOnCart, incrementCount } from '../../store/cart/cart.slice';
import { IBall } from '../ballCard/ballCard.types';

interface IBallsProps {
  balls: IBall;
}

export const BallsAddedInCart = ({ balls }: IBallsProps) => {
	const dispatch = useAppDispatch();
	const deleteItem = () => {
		dispatch(deleteBallOnCart(balls.id));
	};
	return (
		<>
			<div className={styles.ballsInCart}>
				<div className={styles.item}>
					<div className={styles.img_name}>
						<p className={styles.name}>{balls.name}</p>
						<img src={balls.image} width={150} height={150} />
					</div>
					<div className={styles.price_count}>
						<p>Стоимость: {balls.price} р.</p>
						<p>Количество:</p>
						<div className={styles.count}>
							<button onClick={() => dispatch(decrementCount(balls.id))} className={styles.decrement}>-</button>
							<p> {balls.count}</p>
							<button onClick={()=>dispatch(incrementCount(balls.id))} className={styles.increment}>+</button>
						</div>
						<Button onClick={deleteItem} className={styles.customButton}>
              Удалить
						</Button>
					</div>
				</div>
			</div>
		</>
	);
};
